import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { colors, sizes } from 'bee/themes';
import { px2dp } from 'bee/utils/px2dp';
import { Icon } from 'bee/components/Icon';

// @flow
type Props = {
  OrderCategoryName: String,
  iconName: string,
  onPress: func,
};

class OrderCategory extends Component<Props> {
  render() {
    return (
      <TouchableOpacity onPress={this.props.onPress}>
        <View style={orderStyles.OrderCategoryContainer}>
          {/* <Text style={orderStyles.OrderCategoryIcon} /> */}
          <Icon
            name={this.props.iconName}
            color={colors['1102']}
            size={px2dp(50)}
          />
          <Text style={orderStyles.OrderCategoryName}>
            {this.props.OrderCategoryName}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }
}

const orderStyles = StyleSheet.create({
  OrderCategoryContainer: {
    flexDirection: 'column',
    alignItems: 'center',
  },
  OrderCategoryIcon: {
    width: px2dp(51),
    height: px2dp(51),
    backgroundColor: colors[1002],
  },
  OrderCategoryName: {
    fontSize: sizes.f1,
    color: colors['1101'],
    padding: px2dp(10),
  },
});

export default OrderCategory;
